<!--电影列表的组件  -->
<template>
	<div class="mv-container">
		<!-- 顶部的导航的开始 -->
		<header>猫眼电影</header>
		<!-- 顶部的导航的结束 -->
		<!-- 电影主要内容的开始 -->
		<main>
			<div class="mv-city" @click="goToCityPicker">
				{{ cityName }}<i class="iconfont icon-xiajiantou"></i>
			</div>
			<div class="border"></div>
			<div class="mv-tabs">
				<van-tabs v-model="activeName">
					<van-tab title="热映">
						<MovieBody type="hot">
							<template #default="{ list }">
								<HotMovies :list="list"></HotMovies>
							</template>
						</MovieBody>
					</van-tab>
					<van-tab title="待映">
						<MovieBody type="comming">
							<template #default="{ list }">
								<CommingMovies :list="list"></CommingMovies>
							</template>
						</MovieBody>
					</van-tab>
				</van-tabs>
			</div>
			<div class="search">
				<i class="iconfont icon-sousuo"></i>
			</div>
		</main>
		<!-- 电影主要内容的结束 -->
	</div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import Vue from 'vue';
import { Tabs, Tab } from 'vant';
import MovieBody from '@/components/MovieBody.vue';
import HotMovies from './HotMovies.vue';
import CommingMovies from './CommingMovies.vue';

Vue.use(Tabs);
Vue.use(Tab);
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    MovieBody,
    HotMovies,
    CommingMovies,
  },
  data() {
    // 这里存放数据
    return {
      activeName: 1,
    };
  },
  // 监听属性 类似于data概念
  computed: {
    cityName() {
      return localStorage.getItem('cityName') || '广州';
    },
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    goToCityPicker() {
      this.$router.push('/citypicker');
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
@import url('@/assets/border.less');
.mv-container {
	header {
		height: 0.45rem;
		line-height: 0.45rem;
		background-color: #cc4c43;
		color: white;
		text-align: center;
		font-size: 0.16rem;
		font-weight: bold;
	}

	main {
		position: relative;
		.mv-city {
			position: absolute;
			z-index: 999;
			left: 0.15rem;
			height: 0.45rem;
			display: flex;
			align-items: center;
			i.iconfont.icon-xiajiantou {
				font-size: 0.12rem;
				margin-left: 0.02rem;
			}
		}

		.border {
			position: absolute !important;
			width: 100%;
			height: 0.45rem;
			.border-1px(0 0 1px 0);
		}

		.mv-tabs {
		}

		.search {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute !important;
			top: 0;
			bottom: 0;
			right: 0;
			height: 0.45rem;
			width: 0.45rem;
			.border-1px(0 0 0 1px);
			i.iconfont.icon-sousuo {
				font-size: 0.2rem;
				color: #cc4c43;
				font-weight: bold;
			}
		}
	}
}
</style>
<style>
.van-tabs__wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 0.1rem;
}
.van-tabs {
	height: 100%;
}
.van-tabs__line {
	bottom: 0.09rem;
}
.van-tabs__nav {
	width: 60%;
}
.van-tabs__content {
	height: calc(100vh - 0.5rem);
}
.van-tab__pane {
	height: 100%;
	overflow-y: scroll;
}
</style>
